<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qtaheeb</title>
    <link href="css2.css" rel="stylesheet">
        <script src="https://unpkg.com/ipfs-http-client@50.1.2/dist/index.min.js"></script>
    <style>
/* Общие стили */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* Темная тема */
body.dark-mode {
    background-color: #1f1f1f;
    color: #f1f1f1;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #b0d8f0;
}

body.dark-mode p, body.dark-mode li, body.dark-mode label, body.dark-mode span {
    color: #e0e0e0;
}

body.dark-mode a {
    color: #b0d8f0;
}

body.dark-mode a:hover {
    color: #87c0e0;
}

body.dark-mode header {
    background-color: #005a8c;
    color: #f1f1f1;
}

body.dark-mode footer {
    background-color: #005a8c;
    color: #f1f1f1;
}

body.dark-mode .theme-button.dark-mode,
body.dark-mode #btnGetWeather.dark-mode,
body.dark-mode #player button.dark-mode {
    background-color: #005a8c;
    color: #f1f1f1;
}

body.dark-mode .theme-button.dark-mode:hover,
body.dark-mode #btnGetWeather.dark-mode:hover,
body.dark-mode #player button.dark-mode:hover {
    background-color: #003d5e;
}

body.dark-mode .forum-message {
    background-color: #2b2b2b;
    color: #f1f1f1;
}

body.dark-mode .article-item {
    background-color: #2b2b2b;
    color: #f1f1f1;
}

body.dark-mode .article-item h3 {
    color: #b0d8f0;
}

body.dark-mode .article-item:hover h3 {
    color: #87c0e0;
}

body.dark-mode .modal-content {
    background-color: #2b2b2b;
    color: #f1f1f1;
}

body.dark-mode .close-button {
    color: #aaa;
}

body.dark-mode .close-button:hover,
body.dark-mode .close-button:focus {
    color: #f1f1f1;
}

body.light-mode {
    background-color: #f1f1f1;
    color: #333;
}

/* Стили для шапки */
header {
    background-color: #0077b6;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header.light-mode {
    background-color: #b0d8f0;
    color: #333;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-right: 20px;
}

nav ul li a {
    color: inherit;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: color 0.3s;
    position: relative;
}

nav ul li a:before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #0077b6;
    transition: width 0.3s ease-in-out;
}

nav ul li a:hover:before {
    width: 100%;
}

nav ul li a:hover {
    color: #b0d8f0;
}

/* Стили для основного контента */
main {
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.tab-content {
    display: none;
    text-align: center;
    animation: fadeIn 0.5s ease-in-out;
}

.tab-content.active {
    display: block;
}

/* Стили для футера */
footer {
    background-color: #0077b6;
    color: #fff;
    padding: 20px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

footer.light-mode {
    background-color: #b0d8f0;
    color: #333;
}

/* Стили для кнопок */
.theme-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.theme-button.dark-mode {
    background-color: #0077b6;
    color: #fff;
}

.theme-button.dark-mode:hover {
    background-color: #005a8c;
}

.theme-button.light-mode {
    background-color: #b0d8f0;
    color: #333;
}

.theme-button.light-mode:hover {
    background-color: #87c0e0;
}

/* Медиа-запросы для мобильной версии */
@media (max-width: 767px) {
    header {
        flex-direction: column;
        padding: 20px 10px;
        position: static;
    }

    nav ul {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    nav ul li {
        margin-right: 10px;
        margin-bottom: 0;
    }

    nav ul li a {
        font-size: 16px;
    }

    main {
        padding: 20px;
        margin-bottom: 80px;
    }

    .theme-button {
        margin-left: 0 !important;
        margin-top: 10px;
    }

    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Анимaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Estilos para el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
}

/* Estilos para el foro */
#forum-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.forum-message {
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.forum-message:hover {
    background-color: #e6e6e6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos para el editor de artículos */
#article-editor {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

#article-editor input, #article-editor textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s;
}

#article-editor input:focus, #article-editor textarea:focus {
    border-color: #0077b6;
    outline: none;
}

#article-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.article-item {
    background-color: #77dd77;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.article-item:hover {
    background-color: #e6e6e6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.article-item h3 {
    margin-top: 0;
    color: #0077b6;
    transition: color 0.3s;
}

.article-item:hover h3 {
    color: #005a8c;
}

.article-item p {
    margin-bottom: 0;
    line-height: 1.5;
}

/* Estilos para el modo oscuro */
body.dark-mode {
    background-color: #1f1f1f;
    color: #77dd77;
}

body.dark-mode header {
    background-color: #005a8c;
}

body.dark-mode footer {
    background-color: #005a8c;
}

body.dark-mode .theme-button.dark-mode {
    background-color: #005a8c;
    color: #77dd77;
}

body.dark-mode .theme-button.dark-mode:hover {
    background-color: #003d5e;
}

body.dark-mode .forum-message {
    background-color: #2b2b2b;
    color: #77dd77;
}

body.dark-mode .forum-message:hover {
    background-color: #3b3b3b;
}

body.dark-mode .article-item {
    background-color: #2b2b2b;
    color: #77dd77;
}

body.dark-mode .article-item:hover {
    background-color: #3b3b3b;
}

body.dark-mode .article-item h3 {
    color: #b0d8f0;
}

body.dark-mode .article-item:hover h3 {
    color: #87c0e0;
}

body.dark-mode .modal-content {
    background-color: #2b2b2b;
    color: #77dd77;
}

body.dark-mode .close-button {
    color: #aaa;
}

body.dark-mode .close-button:hover,
body.dark-mode .close-button:focus {
    color: #77dd77;
}
/* Инпуты */
input, textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, textarea:focus {
    border-color: #0077b6;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 119, 182, 0.5);
}

/* Кнопки */
.theme-button, #btnGetWeather, #player button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.theme-button.dark-mode, #btnGetWeather.dark-mode, #player button.dark-mode {
    background-color: #0077b6;
    color: #77dd77;
}

.theme-button.dark-mode:hover, #btnGetWeather.dark-mode:hover, #player button.dark-mode:hover {
    background-color: #005a8c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.theme-button.light-mode, #btnGetWeather.light-mode, #player button.light-mode {
    background-color: #b0d8f0;
    color: #333;
}

.theme-button.light-mode:hover, #btnGetWeather.light-mode:hover, #player button.light-mode:hover {
    background-color: #87c0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Вкладка "Погода" */
#weather, #video, #other {
    padding: 20px;
    border-radius: 5px;
    background-color: #669e85;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

#weather.dark-mode, #video.dark-mode, #other.dark-mode {
    background-color: #2b2b2b;
    color: #77dd77;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#weather:hover, #video:hover, #other:hover {
    background-color: #77dd77;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#weather.dark-mode:hover, #video.dark-mode:hover, #other.dark-mode:hover {
    background-color: #3b3b3b;
}

#weather h1, #video h1, #other h1 {
    color: #0077b6;
    margin-top: 0;
    transition: color 0.3s;
}

#weather.dark-mode h1, #video.dark-mode h1, #other.dark-mode h1 {
    color: #b0d8f0;
}

#weather:hover h1, #video:hover h1, #other:hover h1 {
    color: #005a8c;
}

#weather.dark-mode:hover h1, #video.dark-mode:hover h1, #other.dark-mode:hover h1 {
    color: #87c0e0;
}

/* Вкладка "Погода" */
#weather #btnGetWeather {
    margin-top: 10px;
}

#weather #forecast p {
    background-color: #669e85;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

#weather.dark-mode #forecast p {
    background-color: #2b2b2b;
    color: #669e85;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#weather #forecast p:hover {
    background-color: #71bc78;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#weather.dark-mode #forecast p:hover {
    background-color: #3b3b3b;
}

/* Вкладка "Видео" */
#video #player {
    width: 100%;
    height: 400px;
    background-color: #000;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#video #form {
    margin-bottom: 20px;
}

#video #form input, #video #form button {
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
}

#video #form input {
    width: 70%;
    background-color: #669e85;
    transition: background-color 0.3s;
}

#video #form input:focus {
    background-color: #71bc78;
}

#video #form button {
    width: 25%;
    background-color: #0077b6;
    color: #ffbdd3;
    cursor: pointer;
    transition: background-color 0.3s;
}

#video #form button:hover {
    background-color: #005a8c;
}

#video.dark-mode #player {
    background-color: #669e85;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#video.dark-mode #form input {
    background-color: #2b2b2b;
    color: #ffbdd3;
}

#video.dark-mode #form input:focus {
    background-color: #3b3b3b;
}

#video.dark-mode #form button {
    background-color: #005a8c;
    color: #71bc78;
}

#video.dark-mode #form button:hover {
    background-color: #003d5e;
}

/* Вкладка "Остальное" */
#other .app-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

#other .app-item {
    background-color: #669e85;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

#other .app-item:hover {
    background-color: #71bc78;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#other .app-item h3 {
    margin-top: 0;
    color: #0077b6;
    transition: color 0.3s;
}

#other .app-item:hover h3 {
    color: #005a8c;
}

#other .app-item .open-app {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    background-color: #0077b6;
    color: #ffbdd3;
}

#other .app-item .open-app:hover {
    background-color: #005a8c;
}

#other.dark-mode .app-item {
    background-color: #2b2b2b;
    color: #669e85;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#other.dark-mode .app-item:hover {
    background-color: #3b3b3b;
}

#other.dark-mode .app-item h3 {
    color: #b0d8f0;
}

#other.dark-mode .app-item:hover h3 {
    color: #87c0e0;
}

#other.dark-mode .app-item .open-app {
    background-color: #005a8c;
    color: #669e85;
}

#other.dark-mode .app-item .open-app:hover {
    background-color: #003d5e;
}

/* Estilos generales */
a {
    color: #0077b6;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #005a8c;
}

.dark-mode a {
    color: #b0d8f0;
}

.dark-mode a:hover {
    color: #87c0e0;
}
</style>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#" onclick="showTab('home')">Главная</a></li>
                <li><a href="#" onclick="showTab('weather')">Погода</a></li>
                <li><a href="#" onclick="showTab('video')">Видео</a></li>
                <li><a href="#" onclick="showTab('other')">Остальное</a></li>
            </ul>
        </nav>
        <button class="theme-button" onclick="toggleTheme()">Переключить тему</button>
    </header>

    <main>
        <div id="home" class="tab-content active">
            <h1>Добро пожаловать на Qtaheeb!</h1>
            <p>Здесь вы найдете все, что вам нужно.</p>
        </div>

        <div id="weather" class="tab-content">
            <h1>Погода</h1>
    <h1>Узнать погоду</h1>
    <label for="location">Введите название местоположения:</label>
    <input type="text" id="location" placeholder="Название города, поселка, деревни...">
    <button id="btnGetWeather">Узнать погоду</button>
    
    <h2>Погода в <span id="city"></span></h2>
    <p>Температура: <span id="temperature"></span> &deg;C</p>
    <div id="emoji"></div>
    <p>Скорость ветра: <span id="windSpeed"></span></p>
    <p>Направление ветра: <span id="windDirection"></span></p>
    <p>Влажность: <span id="humidity"></span></p>

    <h2>Прогноз погоды на следующие дни:</h2>
    <div id="forecast"></div>
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const locationInput = document.getElementById('location');
    const getWeatherButton = document.getElementById('btnGetWeather');

    if (locationInput && getWeatherButton) {
        const savedLocation = localStorage.getItem('selectedLocation');
        if (savedLocation) {
            locationInput.value = savedLocation;
            getWeather();
        }

        getWeatherButton.addEventListener('click', getWeather);
    }
});

function getWeather() {
    const location = document.getElementById('location').value;
    const apiUrl = `http://api.openweathermap.org/data/2.5/forecast?q=${location}&appid=d0798bac28594e6e633aeb7a91882e8f&units=metric&lang=ru`;

    fetch(apiUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error('Ошибка при запросе к API');
            }
            return response.json();
        })
        .then(data => {
            const currentWeather = data.list[0];
            document.getElementById('city').innerText = location;
            document.getElementById('temperature').innerText = currentWeather.main.temp;
            document.getElementById('windSpeed').innerText = currentWeather.wind.speed;
            document.getElementById('windDirection').innerText = getWindDirection(currentWeather.wind.deg);
            document.getElementById('humidity').innerText = `${currentWeather.main.humidity}%`;

            let weatherEmoji = '☀️';
            const weatherDescription = currentWeather.weather[0].description.toLowerCase();

            if (weatherDescription.includes('облачность') || weatherDescription.includes('overcast clouds')) {
                weatherEmoji = '☁️';
            } else if (weatherDescription.includes('дождь')) {
                weatherEmoji = '🌧';
            } else if (weatherDescription.includes('гроза')) {
                weatherEmoji = '⛈';
            } else if (weatherDescription.includes('снег')) {
                weatherEmoji = '❄️';
            }

            document.getElementById('emoji').innerHTML = weatherEmoji;

            const forecastData = data.list.slice(1, 6); // Show forecast for the next 5 days
            const forecastContainer = document.getElementById('forecast');
            forecastContainer.innerHTML = '';

            for (let i = 1; i <= 5; i++) {
                const forecast = forecastData[i - 1];
                const date = new Date(forecast.dt * 1000);
                let day;
                if (i === 1) {
                    day = 'Завтра';
                } else if (i === 2) {
                    day = 'Послезавтра';
                } else {
                    day = `${i} ${getDayWord(i)}`;
                }

                const temperature = forecast.main.temp;
                const windSpeed = forecast.wind.speed;
                const windDirection = getWindDirection(forecast.wind.deg);
                const humidity = `${forecast.main.humidity}%`;
                let forecastEmoji = '☀️';

                const weatherDescription = forecast.weather[0].description;
                if (weatherDescription.includes('облачность') || weatherDescription.includes('overcast clouds')) {
                    forecastEmoji = '☁️';
                } else if (weatherDescription.includes('дождь')) {
                    forecastEmoji = '🌧';
                } else if (weatherDescription.includes('гроза')) {
                    forecastEmoji = '⛈';
                } else if (weatherDescription.includes('снег')) {
                    forecastEmoji = '❄️';
                }

                const forecastElement = document.createElement('p');
                forecastElement.textContent = `${day}: Температура ${temperature}°C, ${forecastEmoji}, Скорость ветра: ${windSpeed} м/с, Направление ветра: ${windDirection}, Влажность: ${humidity}`;
                forecastContainer.appendChild(forecastElement);
            }

            localStorage.setItem('selectedLocation', location);
        })
        .catch(error => {
            console.error('Ошибка:', error);
        });
}

function getWindDirection(deg) {
    const directions = ["север", "северо-восток", "восток", "юго-восток", "юг", "юго-запад", "запад", "северо-запад"];
    const index = Math.round(((deg % 360) / 45)) % 8;
    return directions[index];
}

function getDayWord(day) {
    if (day === 3) {
        return 'день';
    } else if (day === 4) {
        return 'дня';
    } else {
        return 'дней';
    }
}
    </script>
    </div>

        <div id="video" class="tab-content">
            <h1>Видео</h1>
        <div id="player"></div>
        <div id="form">
                <form onsubmit="event.preventDefault(); loadVideo();">
                        <input type="text" id="videoUrl" placeholder="YouTube video URL" required>
                        <button type="submit">Play</button>
                </form>
        </div>

        <script>
                // Replace 'YOUR_VIDEO_ID' with the actual video ID
                var videoId = 'YOUR_VIDEO_ID';
                var player;

                function onYouTubeIframeAPIReady() {
                        player = new YT.Player('player', {
                                height: '100%',
                                width: '100%',
                                videoId: videoId,
                                playerVars: {
                                        autoplay: 1,
                                        controls: 1,
                                        showinfo: 0,
                                        rel: 0,
                                        modestbranding: 1,
                                        fs: 0,
                                        cc_load_policy: 0,
                                        iv_load_policy: 3
                                },
                                events: {
                                        onReady: onPlayerReady
                                }
                        });
                }

                function onPlayerReady(event) {
                        // Remove this line to allow sound
                        // event.target.mute();
                }

                function loadVideo() {
                        var videoUrl = document.getElementById('videoUrl').value;
                        var videoId = getVideoIdFromUrl(videoUrl);
                        if (videoId) {
                                player.loadVideoById(videoId);
                        }
                }

                function getVideoIdFromUrl(url) {
                        var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
                        var match = url.match(regex);
                        if (match && match[2].length == 11) {
                                return match[2];
                        }
                        return null;
                }

                // Replace 'https://www.youtube.com/embed/' with 'https://www.youtube.com/watch?v='
                var videoUrl = 'https://www.youtube.com/embed/' + videoId;
                var tag = document.createElement('script');
                tag.src = 'https://www.youtube.com/iframe_api';
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        </script>
        </div>

<div id="other" class="tab-content">
    <h1>Остальное</h1>
    <div class="app-container">
        <div class="app-item">
            <h2>Игры</h2>
            <h1>Цветовые Войны</h1>
            <button class="open-app" onclick="openApp('cs.html')">Открыть</button>
        </div>
    </div>
    <p>&copy; 2024 Qtaheeb. Все права защищены.</p>
    <p>Версия сайта: 1.3 <span id="device"></span></p>
    <p>Сделано сообществом Qtaheeb с любовью ♥</p>
    <a href="https://notabug.org/Qtaheeb_Not_Inc/Qtaheeb-HTML.git">Открытый исходный код на NotaBug</a>
    <script>
    // Функция для определения устройства
    function detectDevice() {
        const userAgent = navigator.userAgent.toLowerCase();
        let device = 'desktop';

        if (/iphone|ipad|ipod/.test(userAgent)) {
            device = 'iPhone/iPad/iPod';
        } else if (/android/.test(userAgent)) {
            device = 'Android';
        } else if (/windows/.test(userAgent)) {
            device = navigator.userAgent.match(/Touch/) ? 'Планшет Windows' : 'Ноутбук/ПК Windows';
        } else if (/mac os/.test(userAgent)) {
            device = navigator.maxTouchPoints > 0 ? 'Планшет Mac' : 'Ноутбук/ПК Mac';
        }

        return device;
    }

    // Получаем элемент span для вывода устройства
    const deviceSpan = document.getElementById('device');

    // Определяем устройство и выводим текст
    const device = detectDevice();
    deviceSpan.textContent = `(${device})`;
</script>
</div>

    <script>
    // Функция для переключения темы
    function toggleTheme() {
        var body = document.body;
        body.classList.toggle("dark-mode");
        body.classList.toggle("light-mode");

        var header = document.querySelector("header");
        header.classList.toggle("light-mode");

        var footer = document.querySelector("footer");
        footer.classList.toggle("light-mode");

        var themeButtons = document.querySelectorAll(".theme-button");
        themeButtons.forEach(function(button) {
            button.classList.toggle("dark-mode");
            button.classList.toggle("light-mode");
        });
    }

    // Автоматическое переключение темы
    window.addEventListener("load", function() {
        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
            document.body.classList.add("dark-mode");
        } else {
            document.body.classList.add("light-mode");
        }
    });

    // Функция для переключения вкладок
    function showTab(tabName) {
        var tabContents = document.getElementsByClassName("tab-content");
        for (var i = 0; i < tabContents.length; i++) {
            tabContents[i].style.display = "none";
        }

        var activeTab = document.getElementById(tabName);
        activeTab.style.display = "block";
        activeTab.classList.add("fade-in");
    }

    // Автоматически открываем первую вкладку
    window.addEventListener("load", function() {
        showTab("home");
    });

    // Функция для открытия приложения в модальном окне
    function openApp(url) {
        // Создаем модальное окно
        var modal = document.createElement("div");
        modal.classList.add("modal");

        // Создаем содержимое модального окна
        var modalContent = document.createElement("div");
        modalContent.classList.add("modal-content");

        // Добавляем iframe с приложением
        var iframe = document.createElement("iframe");
        iframe.src = url;
        iframe.width = "100%";
        iframe.height = "100%";
        modalContent.appendChild(iframe);

        // Добавляем кнопку закрытия
        var closeButton = document.createElement("span");
        closeButton.classList.add("close-button");
        closeButton.textContent = "×";
        closeButton.onclick = function() {
            modal.style.display = "none";
        };
        modalContent.appendChild(closeButton);

        // Добавляем модальное окно на страницу
        modal.appendChild(modalContent);
        document.body.appendChild(modal);

        // Делаем модальное окно перетаскиваемым и изменяемым по размеру
        var isDragging = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;
        var active = false;

        modalContent.addEventListener("mousedown", dragStart);
        modalContent.addEventListener("mouseup", dragEnd);
        modalContent.addEventListener("mousemove", drag);

        var resizeObserver = new ResizeObserver(function(entries) {
            for (var entry of entries) {
                var newWidth = entry.contentRect.width;
                var newHeight = entry.contentRect.height;
                modalContent.style.width = newWidth + "px";
                modalContent.style.height = newHeight + "px";
                iframe.width = newWidth + "px";
                iframe.height = newHeight + "px";
            }
        });

        resizeObserver.observe(modalContent);

        function dragStart(e) {
            initialX = e.clientX - xOffset;
            initialY = e.clientY - yOffset;

            if (e.target === modalContent) {
                active = true;
            }
        }

        function dragEnd(e) {
            initialX = currentX;
            initialY = currentY;

            active = false;
        }

        function drag(e) {
            if (active) {
                e.preventDefault();

                if (e.type === "mousemove") {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;

                    xOffset = currentX;
                    yOffset = currentY;

                    setTranslate(currentX, currentY, modalContent);
                }
            }
        }

        function setTranslate(xPos, yPos, el) {
            el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
        }

        // Показываем модальное окно
        modal.style.display = "block";

        // Блокируем взаимодействие с основной страницей
        var mainContent = document.querySelector("main");
        mainContent.style.pointerEvents = "none";

        // Разблокируем взаимодействие с основной страницей при закрытии модального окна
        closeButton.onclick = function() {
            modal.style.display = "none";
            mainContent.style.pointerEvents = "auto";
        };
    }

    // Автоматически открываем первую вкладку
    window.addEventListener("load", function() {
        showTab("home");
    });
    </script>
</body>
</html>
